<template>
  <div class="left">
    <el-tabs  style="height: 300px;">
    <el-tab-pane v-for="(item,index) in categoryRelationList" :key="index" :label="item.name" >
      <div class="overflow">
        <div v-for="(item,index) in item.productRelationList" :key="index" class="cs">
          <a href="/detail">
          <img v-bind:src="API.BASE_SERVER_URL+item.defaultImg" class="img">
          <h5 class="h5">{{item.name}}</h5>
          <h4 class="h4">￥{{item.price}}.00</h4>
          </a>
        </div>
        </div>
    </el-tab-pane>
  </el-tabs>
  </div>
</template>
  
<script>
export default {
  name: "Home",
  data () {
    return {
      categoryRelationList: [],
      activeName: 'second'
    };
  },
   created:function(){
    this.$post(this.API.BASE_SERVER_URL + "/api/v1/catalog/category/product" + "/8").then((res) => {
        if (res.errorCode == 0) {
          this.categoryRelationList = res.data;
        }
      });
  },
};
</script>



<style lang="scss" scoped>
.overflow {
    width: 500px;
    height: 200px;
    overflow-x: hidden;
    text-align: center;
}
.img{
  width: 100px;
  height: 100px;
  }
.h4{
  color: coral;
  font-size: 15px;
  margin-bottom: 0px;
}
.cs{
  width: 105px;
  height: 180px;
  float: left;
  margin-left: 7px;
  margin-top: 5px;
  font-size: 5px;
  font-family: Arial, Helvetica, sans-serif;
}
</style>